<template>
    <div class="field-control field-control-range" :class="{'field-control-error': !validate}">
        <Input ref="input" @on-keyup.enter="inputEnter" :disabled="disabled" :name="name+'_start'" :type="inputType" @input="valueStartInput" :value="valueStart">
        </Input>
        <span class="range-char">到</span>
        <Input ref="input" @on-keyup.enter="inputEnter" :disabled="disabled" :name="name+'_end'" :type="inputType" @input="valueEndInput" :value="valueEnd">
        </Input>
        <div class="field-message" v-show="!validate">{{message}}</div>
    </div>
</template>

<script>
import base from "./base";
export default {
  extends: base,
  props: {},
  data() {
    return {};
  },
  computed: {
    valueNull() {
      return (
        (this.valueStart == null ||
          this.valueStart === undefined ||
          this.valueStart === "") &&
        (this.valueEnd === null ||
          this.valueEnd === undefined ||
          this.valueEnd === "")
      );
    },
    valueStart() {
      return this.rowData[this.codeStart];
    },
    valueEnd() {
      return this.rowData[this.codeEnd];
    },
    codeStart() {
      return this.model.code + "_start";
    },
    codeEnd() {
      return this.model.code + "_end";
    }
  },
  methods: {
    valueStartInput(v) {
      this.$emit("extInput", {
        code: this.codeStart,
        value: v
      });
    },
    valueEndInput(v) {
      this.$emit("extInput", {
        code: this.codeEnd,
        value: v
      });
    }
  }
};
</script>

<style lang="less">
.field-control-range {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  .range-char {
    padding: 0 10px;
    line-height: 31px;
  }
  > .ivu-input-wrapper {
    flex: 1;
  }
  .field-message {
    width: 100%;
  }
}
</style>


